{% extends 'IcsocUIBundle::page.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    '@jquery_ui_css'
    '@colorpicker_css'
    '@gritter_css'
    '@multiselect_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    <style>
        .btn-padding{margin: 5px 0 0 8px !important}
    </style>
{% endblock %}
{% block content %}
    <div class="col-xs-12 col-sm-12 widget-container-col ui-sortable">
        <!-- #section:custom/widget-box -->
        <div class="widget-box">
            <div class="widget-header">
                <h5 class="widget-title">{{ 'Role List'|trans }}</h5>

                <!-- #section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>

                <!-- /section:custom/widget-box.toolbar -->
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <div class="btn-group" id="role-button">
                        {% for role in roles %}
                            <button class="btn btn-success btn-padding" data-text="{{ role.roleId }}">
                                <span id="text_{{ role.roleId }}1">{{ role.name }}</span>&nbsp;&nbsp;&nbsp;
                                <span id="text_{{ role.roleId }}2">{{ roleGrade[role.roleGrade] }} </span>
                            </button>
                        {% endfor %}
                    </div>
                    <br/><br/>
                    <p>
                        <button class="btn btn-primary btn-round btn-sm" id="add">{{ 'Add'|trans }}</button>
                        <button class="btn btn-primary btn-round btn-sm" id="edit">{{ 'Update'|trans }}</button>
                        <button class="btn btn-primary btn-round btn-sm" id="delete">{{ 'Delete'|trans }}</button>
                        <button class="btn btn-primary btn-round btn-sm" id="copy">{{ 'Copy'|trans }}</button>
                    </p>

                    <p id="insertdiv" class="input-group" style="display:none">
                        <input type="text" class="input-sm" id="insertval" placeholder="{{ 'Role Name'|trans }}">
                        <select class="input-small" id="insertgrade">
                            {% for key,rg in roleGrade %}
                                <option value="{{ key }}">{{ rg }}</option>
                            {% endfor %}
                        </select>
                        <button id="insert" class="btn btn-sm btn-success">{{ 'Save'|trans }}</button>
                    </p>
                    <p id="editdiv" class="input-group" style="display:none">
                        <input type="text" class="input-sm" id="editval" placeholder="{{ 'Role Name'|trans }}">
                        <select class="input-small" id="editgrade" >
                            {% for key,rg in roleGrade %}
                                <option value="{{ key }}" label="{{ rg }}">{{ rg }}</option>
                            {% endfor %}
                        </select>
                        <button id="update" class="btn btn-sm btn-success">{{ 'Change'|trans }}</button>
                    </p>
                    <p id="copydiv" class="input-group" style="display:none">
                        <input type="text" class="input-sm" id="copyval" disabled placeholder="{{ 'Role Name'|trans }}">
                        <span>{{ 'copy the role to'|trans }}</span>
                        <input type="text" class="input-sm" id="copyval2" placeholder="{{ 'Copy role  name'|trans }}">
                        <button id="copyRole" class="btn btn-sm btn-success">{{ 'Save the copy'|trans }}</button>
                    </p>
                    <br/>
                    <div id="info" align="center"></div>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>

    <!-- #section:配置信息 -->
    <div class="col-xs-12 col-sm-12 widget-container-col ui-sortable">
        <!-- #section:后台权限 -->
        <div class="widget-box" data-text="menus" id="menus_config_box">
            <div class="widget-header">
                <h5 class="widget-title">{{ 'Background privilege'|trans }}</h5>
                <div class="widget-toolbar">
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body" id="menus"></div>
        </div>
        <!-- /section:后台权限 -->

        <!-- #section:数据权限 -->
        <div class="widget-box collapsed" data-text="data" id="data_authority_box">
            <div class="widget-header">
                <h5 class="widget-title">{{ 'Data authority'|trans }}</h5>
                <div class="widget-toolbar">
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body" id="data"></div>
        </div>
        <!-- /section:数据权限 -->

        <!-- #section:报表指标配置 -->
        <div class="widget-box collapsed" data-text="report" id="report_config_box">
            <div class="widget-header">
                <h5 class="widget-title">报表指标配置</h5>
                <div class="widget-toolbar">
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body" id="report"></div>
        </div>
        <!-- /section:报表指标配置 -->

        <!-- #section:监控配置 -->
        <div class="widget-box collapsed" id="monitor_config_box">
            <div class="widget-header">
                <h5 class="widget-title">监控配置</h5>
                <div class="widget-toolbar">
                    <a href="#" data-action="settings" class="hide">
                        <i class="ace-icon fa fa-plus"></i>
                    </a>
                    <a data-action="reload" href="#">
                        <i class="ace-icon fa fa-refresh"></i>
                    </a>
                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body" id="monitor"></div>
        </div>
        <!-- /section:监控配置 -->
    </div>
    <!-- /section:配置信息 -->
{% endblock %}
{% block footer %}
    {% javascripts
    '@gritter_js'
    '@jquery_ui_js'
    '@common_js'
    '@colorpicker_js'
    '@spinner_js'
    '@bootbox_js'
    '@jqvalidate_js'
    '@multiselect_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var click_id = '';
        $(document).ready(function(){
            var idArray = ['#menus_config_box','#data_authority_box','#report_config_box','#monitor_config_box'];
            var idString = idArray.join(",");
            $(idString).find(".fa-chevron-down,.fa-chevron-up").on('click', function () {
                if (click_id=="") {
                    $.gritter.add({
                        title: '{{ 'Prompt'|trans }}',
                        text: '{{ 'You did not select any role cannot perform this operation'|trans }}!',
                        class_name: 'gritter-error'
                    });

                    return false;
                }
                var returnconfig = true;
                var monitorconfigId = $(this).parent().parent().parent().parent().attr("id");
                if (monitorconfigId == 'monitor_config_box') {
                    $.ajax({
                        type:'post',
                        url: '{{ path("icsoc_security_role_info_get_usertype") }}',
                        data: {'role_id': click_id},
                        dataType: 'json',
                        async: false,
                        success: function (responce) {
                            if (responce['code'] == 400) {
                                //坐席权限
                                $.gritter.add({
                                    title: '{{ 'Prompt'|trans }}',
                                    text: '该角色属于坐席权限，无权限配置大屏监控！',
                                    class_name: 'gritter-error'
                                });

                                returnconfig = false;
                            }
                        }
                    });
                }

                if (!returnconfig) {
                    return returnconfig;
                }

                var name = $(this).parent().parent().parent().parent().attr('class');
                if (name != 'widget-box') {
                    var id = $(this).parent().parent().parent().parent().attr('id');
                    var filterarray = $.grep(idArray,function(value){
                        return value != "#"+id;
                    });
                    var filterString = filterarray.join(",");
                    $(filterString).addClass('collapsed');

                    if (id == 'monitor_config_box') {
                        /** 加载监控配置 */
                        loadTabAttribute({
                            url: '{{ path("icsoc_security_role_load_monitor") }}',
                            data: {roleId: click_id},
                            callback: function(response) {
                                $("#monitor_config_box").find(".widget-toolbar a").first().removeClass('hide');
                                if ($("#monitor .widget-body-inner .widget-main").children().length > 0) {
                                    $('#monitor').empty().html(response);
                                } else {
                                    $('#monitor').empty().html(response);
                                }
                            }
                        });
                    }
                }
            });

            /** 选择角色 */
            $('#role-button').on('click', '.btn', function() {
                $('#report').html('<i class="ace-icon fa fa-spinner fa-spin orange bigger-125"></i>Loading ......');
                if ($("#monitor .widget-body-inner").length > 0) {
                    $('#monitor').empty();
                    if ($("#dialog-message-monitor").length > 0) {
                       $("#dialog-message-monitor").parent().remove();
                    }
                    if ($("#dialog-phone-monitor").length > 0) {
                        $("#dialog-phone-monitor").parent().remove();
                    }
                    $("#menus_config_box").removeClass("collapsed");
                    $("#monitor_config_box").addClass("collapsed");
                    $("#monitor_config_box").find(".widget-toolbar a").first().addClass('hide');
                } else if ($('#monitor').length > 0) {
                    $('#monitor').empty();
                    if ($("#dialog-message-monitor").length > 0) {
                        $("#dialog-message-monitor").parent().remove();
                    }
                    if ($("#dialog-phone-monitor").length > 0) {
                        $("#dialog-phone-monitor").parent().remove();
                    }
                    $("#menus_config_box").removeClass("collapsed");
                    $("#monitor_config_box").addClass("collapsed");
                    $("#monitor_config_box").find(".widget-toolbar a").first().addClass('hide');
                }

                $('#data').html('<i class="ace-icon fa fa-spinner fa-spin orange bigger-125"></i>Loading ......');
                click_id = $(this).attr('data-text');
                var id = click_id;
                if($("#insertdiv").css('display')=='inline')
                {
                    $("#insertdiv").hide();
                    $("#editdiv").show();
                }
                $("#editval").val($("#text_"+id+1).text());
                $('#copyval').val($("#text_"+id+1).text());
                $('#copyval2').val($("#text_"+id+1).text()+'-副本');
                $("#editgrade option[label='"+$("#text_"+id+2).text().trim()+"']").attr("selected", "selected");
                $("#action_lsit input").removeAttr('checked');
                $("#info").html("");
                $.ajax({
                    url:      "{{ path('icsoc_security_role_action_list') }}",
                    data:     {id: id},
                    type:     "get",
                    dataType: "json",
                    cache:false,
                    success: function(responce){
                        if(responce["code"] == 200)
                        {

                            var id_arr = responce['data'][0]['action_list'].split(',');
                            if(id_arr=="all"){
                                $("#maindiv input:not(.button)").attr('checked','checked');
                            } else {
                                var len = id_arr.length-1;
                                for (var i=0;i<=len;i++) {
                                    if(id_arr[i] && $("#"+id_arr[i])[0]) {
                                        $("#"+id_arr[i])[0]['checked'] = true;
                                    }
                                }
                            }
                        } else {
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: responce.message,
                                class_name: 'gritter-error'
                            });
                        }
                    }
                });

                $('#role-button button').removeClass('btn-danger').addClass('btn-success');
                $(this).removeClass('btn-success').addClass('btn-danger');

                /** 加载数据权限信息 */
                loadTabAttribute({
                    url: '{{ path("icsoc_security_role_load_data") }}',
                    data: {roleId: click_id},
                    callback: function(response) {
                        $('#data').html(response);
                    }
                });

                /** 加载配置信息 */
                loadTabAttribute({
                    url: '{{ path("icsoc_security_role_load") }}',
                    data: {tab_type:'report', roleId: click_id},
                    callback: function(response) {
                        $('#report').html(response);
                    }
                });

                {#/** 加载监控配置 */#}
                {#loadTabAttribute({#}
                    {#url: '{{ path("icsoc_security_role_load_monitor") }}',#}
                    {#data: {roleId: click_id},#}
                    {#callback: function(response) {#}
                        {#$("#monitor_config_box").find(".widget-toolbar a").first().removeClass('hide');#}
                        {#if ($("#monitor .widget-body-inner").length > 0) {#}
                            {#$('#monitor .widget-body-inner').empty().html(response);#}
                        {#} else {#}
                            {#$('#monitor').empty().html(response);#}
                        {#}#}
                    {#}#}
                {#});#}

            });

            $("#delete").click(function() {
                if (click_id=="") {
                    $("#insertdiv").hide();
                    $("#info").html("<font color='red'>{{ 'Please select to delete characters'|trans }}</font>");
                } else {
                    $('#delete').popover({
                        placement:'top',
                        html:true,
                        trigger: 'manual',
                        content:'<div>{{ "Are you sure you want to delete this role"|trans }}</div><div><button type="button" onclick="confirmDel(1)">确认</button>&nbsp;&nbsp;<button type="button" onclick="confirmDel(0)">取消</button></div>'
                    });
                    $("#delete").popover('show');
                    $("#info").html("");
                }
            });


            /** 添加角色 */
            $("#add").click(function(){
                $("#info").html("");
                $("#insertdiv").css('display','inline');
                $("#editdiv").css('display','none');
                $('#copydiv').css('display', 'none');
                $("#insertval").val('');
            });

            $("#insert").click(function(){
                var name = $.trim($("#insertval").val());
                var grade = $("#insertgrade").val();
                if(name)
                {
                    $('#submit_role').attr('disabled',true);
                    $.ajax({
                        url:      "{{ path('icsoc_security_role_add') }}",
                        data:     {name: name,role_grade:grade},
                        type:     "get",
                        dataType: "json",
                        success: function (responce) {
                            if (responce.code == 200) {
                                $("#insertdiv").css('display','none');
                                var str = '<button class="btn btn-success btn-padding" data-text="'+responce.data.role_id+'">\
                                                <span id="text_'+responce.data.role_id+'1">'+responce.data.name+'</span>&nbsp;&nbsp;&nbsp;\
                                                <span id="text_'+responce.data.role_id+'2">'+responce.data.role_grade+'</span>\
                                          </button>'
                                $(str).appendTo('#role-button');
                                $.gritter.add({
                                    title: '{{ 'Prompt'|trans }}',
                                    text: '{{ 'Add success'|trans }}',
                                    class_name: 'gritter-success'
                                });
                            } else {
                                $.gritter.add({
                                    title: '{{ 'Prompt'|trans }}',
                                    text: '{{ 'Failed to add'|trans }},'+responce.message,
                                    class_name: 'gritter-error'
                                });
                            }
                            $('#submit_role').attr('disabled',false);
                        }
                    });
                    $("#insertdiv").css('display','none');
                }
                else
                {
                    $.gritter.add({
                        title: '{{ 'Prompt'|trans }}',
                        text: '{{ 'Please fill in the role name'|trans }}',
                        class_name: 'gritter-error'
                    });
                }

            });

            /** 编辑角色 */
            $("#edit").click(function(){
                $("#editdiv").css('display','inline');
                $("#insertdiv").css('display','none');
                $('#copydiv').css('display', 'none');
                if($("#editval").val()==""){
                    $("#editdiv").hide();
                    $("#info").html("<font color='red'>{{ 'Please choose to modify the role'|trans }}</font>");
                }
                else{
                    $("#editdiv").show();
                }
            });

            $("#update").click(function(){
                var name = $.trim($("#editval").val());
                var grade = $("#editgrade").val();
                if(name!=''){
                    $.ajax({
                        url:      "{{ path('icsoc_security_role_edit') }}",
                        data:     {id: click_id, name: name,role_grade:grade},
                        type:     "get",
                        dataType: "json",
                        success: function(responce){
                            if(responce.code == 200)
                            {
                                $("#editdiv").css('display','none');
                                $.gritter.add({
                                    title: '{{ 'Prompt'|trans }}',
                                    text: '{{ 'Successful modification'|trans }}',
                                    class_name: 'gritter-success'
                                });
                                $("#text_"+click_id+"1").text(responce.data.name);
                                $("#text_"+click_id+"2").text(responce.data.role_grade);
                            } else {
                                $.gritter.add({
                                    title: '{{ 'Prompt'|trans }}',
                                    text: '{{ 'Fail modification'|trans }},'+responce.message,
                                    class_name: 'gritter-error'
                                });
                            }
                        }
                    });
                    $("#editdiv").css('display','none');
                }
                else
                {
                    // $.messager.alert("修改确认","角色名称不能为空");
                }
            });

            //复制角色
            $('#copy').click(function() {
                $('#copydiv').css('display', 'inline');
                $('#editdiv').css('display', 'none');
                $('#insertdiv').css('display', 'none');
                if ($('#copyval').val() == '') {
                    $('#copydiv').css('display', 'none');
                    $("#info").html("<font color='red'>{{ 'Please choose the role to copy'|trans }}</font>");
                }
            });

            $('#copyRole').click(function() {
                var copyName = $.trim($('#copyval2').val());
                if (copyName == '') {
                    $.gritter.add({
                        title: '{{ 'Prompt'|trans }}',
                        text: '{{ 'Copy name cannot be empty'|trans }}',
                        class_name: 'gritter-error'
                    });
                }

                $.ajax({
                    url:"{{ path('icsoc_security_role_copyRole') }}",
                    data:{roleId: click_id, name: copyName},
                    dataType: "json",
                    success: function(responce){
                        if (responce.code == 200) {
                            $('#copydiv').css('display', 'none');
                            var str = '<button class="btn btn-success btn-padding" data-text="'+responce.data.role_id+'">\
                                                <span id="text_'+responce.data.role_id+'1">'+responce.data.name+'</span>&nbsp;&nbsp;&nbsp;\
                                                <span id="text_'+responce.data.role_id+'2">'+responce.data.role_grade+'</span>\
                                          </button>'
                            $(str).appendTo('#role-button');
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: '{{ 'Copy role success'|trans }}',
                                class_name: 'gritter-success'
                            });
                        } else {
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: '{{ 'Copy role failed'|trans }}, '+responce.message,
                                class_name: 'gritter-error'
                            });
                        }
                    }
                });
            });

            /** 加载菜单文件 */
            loadTabAttribute({
                url: '{{ path("icsoc_security_role_load") }}',
                data: {tab_type:'menus'},
                callback: function(response) {
                    $('#menus').html(response);
                }
            });

            $("#monitor_config_box [data-action=reload] .fa-refresh").on('click', function () {
                loadTabAttribute({
                    url: '{{ path("icsoc_security_role_load_monitor") }}',
                    data: {roleId: click_id},
                    callback: function(response) {
                        if ($("#monitor .widget-body-inner").length > 0) {
                            $('#monitor').empty();
                            if ($("#dialog-message-monitor").length > 0) {
                                $("#dialog-message-monitor").parent().remove();
                            }
                            if ($("#dialog-phone-monitor").length > 0) {
                                $("#dialog-phone-monitor").parent().remove();
                            }
                            $("#monitor").html(response);
                            $("#monitor_config_box").find(".widget-toolbar a").first().removeClass('hide');
                        } else {
                            $('#monitor').empty();
                            if ($("#dialog-message-monitor").length > 0) {
                                $("#dialog-message-monitor").parent().remove();
                            }
                            if ($("#dialog-phone-monitor").length > 0) {
                                $("#dialog-phone-monitor").parent().remove();
                            }
                            $("#monitor").html(response);
                            $("#monitor_config_box").find(".widget-toolbar a").first().removeClass('hide');
                        }
                    }
                });
            });
        });

        function confirmDel (flag) {
            if(!flag){
                $('#delete').popover('hide');
                return ;
            }
            if (click_id=='') {
                gritterAlert('','{{ 'Please select to delete characters'|trans }}','error');
                return ;
            }
            $("#editval").val('');
            $("#editdiv").hide();
            $("#insertdiv").hide();
            $.ajax({
                url:      "{{ path('icsoc_security_role_info_delete_role') }}",
                data:     {id: click_id},
                type:     "get",
                dataType: "json",
                success: function(responce) {
                    if (responce["code"] == 200) {
                        $.gritter.add({
                            title: '{{ 'Prompt'|trans }}',
                            text: '{{ 'Delete success'|trans }}',
                            class_name: 'gritter-success'
                        });
                        $("#text_"+click_id+'1').parent().remove();
                        $("#action_lsit input").removeAttr('checked');
                        click_id = ""; //删除成功后吧click_id 清空；
                    } else {
                        $.gritter.add({
                            title: '{{ 'Prompt'|trans }}',
                            text: responce.message,
                            class_name: 'gritter-error'
                        });
                        $('#delete').popover('hide');
                        return;
                    }
                    $('#delete').popover('hide');
                    location.reload();
                }
            });
            //$("#deletediv").css('display','none');
        }

        /**
         * 加载Tab属性
         *
         * @param obj
         */
        function loadTabAttribute(obj) {
            $.ajax({
                url: obj.url,
                data: obj.data,
                dataType: 'html',
                cache: false,
                async: false,
                success: obj.callback
            });
        }

        /**
         * 生成随机字符
         *
         * @param len
         * @returns {string}
         */
        function getRandomString(string) {
            var len = 10;
            var $chars = 'abcdefhijklmnopqrstuvwxyz0123456789';
            var maxPos = $chars.length;

            for (var i = 0; i < len; i++) {
                string += $chars.charAt(Math.floor(Math.random() * maxPos));
            }

            return string;
        }
    </script>
{% endblock %}